<template>
  <div class="list_wrap">
    <div class="speech_item" @click="editStageName">
      <!-- <picker :range="stageList" range-key="name" @change="onStageConfirm" :value="stageIndex"> -->
      <div
        class="speech_title">
        <div class="left">
          <view class="iconfont iconshijianzhou"/>
          <h2>阶段名称</h2>
        </div>
        <div class="right">
          <span>{{ stageDetail.name }}</span>
          <view class="iconfont iconjiantou"/>
        </div>
      </div>
      <!-- </picker> -->
    </div>
    <div class="speech_item">
      <div class="speech_title">
        <div class="left">
          <view class="iconfont iconmoban"/>
          <h2>阶段更新模板话术</h2>
        </div>
        <span class="right_txt" @click="editItem({stage_id: stageDetail.id})">添加</span>
      </div>

      <div class="steps" v-if="!$util.isEmpty(stageDetail.fast_list)">
           <uni-steps :data="stageDetail.fast_list" activeIcon inActiveIcon direction="column" active-color="#FF6900" activeTxtColor="#333"  contentKey="content" :activeAll="true">
          <template v-slot:activeIcon="{item}">
              <div class="active_icon"/>
          </template>
          <template v-slot:inActive="{item}">
              <div class="inactive_icon"/>
          </template>
          <template v-slot:extra="{item}">
             <div class="btn_wrap">
              <div class="btn" @click="editItem({id: item.id,content: item.title})">编辑</div>
              <div class="btn" @click="delItem(item.id)">删除</div>
            </div>
          </template>
        </uni-steps>
      </div>
    </div>

    <p class="speech_tip">温馨提示：模板话术可以在更新工地时使用</p>
  </div>
</template>

<script>

import uniSteps from '@/components/uni-steps/uni-steps/uni-steps'
import { getStageDetail, delTemplateSpeech } from '@/api/constructionSite'

export default {
	name: 'EditTemplateSpeech',
	components: {
		uniSteps
	},
	data() {
		return {
			showPicker: false,
			stage: '',
			stageList: [],
			stageIndex: 0,
			stageTxt: '',
			stageDetail: {}
		}
	},
	onLoad(option) {
		this.option = option
	},
	onShow() {
		this.getStageDetail()
	},
	methods: {
		getStageDetail() {
			getStageDetail({ stage_id: this.option.ts_id }).then(res => {
				this.stageDetail = res.data || {}
			})
		},
		editStageName() {
			const params = {
				name: this.stageDetail.name,
				stage_id: this.stageDetail.id
			}
			uni.navigateTo({
				url: `/pages/constructionSite/editStage${this.commonJS.queryData(params)}`
			})
		},
		editItem(itemObj) {
			if (itemObj.content) {
				itemObj.stage_id = this.stageDetail.id
			}
			console.log(itemObj, 'editTS --> editStage')
			uni.navigateTo({
				url: `/pages/constructionSite/editStage${this.commonJS.queryData(itemObj)}`
			})
		},
		delItem(id) {
			uni.showModal({
				title: '提示',
				content: '确定删除该话术吗？',
				success: res => {
					if (res.confirm) {
						delTemplateSpeech({ id }).then(() => {
							uni.showToast({
								title: '删除成功',
								icon: 'none'
							})
							setTimeout(() => {
								this.getStageDetail()
							}, 500)
						})
					}
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
.list_wrap {
    padding: 20px 30px 100px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    min-height: 100vh;
    .speech_item {
        border-radius:20px;
        background-color: #fff;
        margin-bottom: 20px;
        padding: 0 20px 0 24px;
        .speech_title {
            display: flex;
            font-size:28px;
            justify-content: space-between;
            height:90px;
            line-height: 90px;
            .left {
                display: flex;
                align-items: center;
                .iconshijianzhou {
                    font-size: 30px;
                    color: #FF6900;
                }
                .iconmoban {
                    color: #FF6900;
                }
                h2 {
                    font-size: 28px;
                    font-weight:600;
                    color:rgba(51,51,51,1);
                    margin-left: 11px;
                }
            }

            .right {
                display: flex;
                align-items: center;
                span,.iconjiantou {
                    color: #999;
                }
            }
            .right_txt {
                color: #FF6900;
            }

        }
        .steps {
            border-top: 1px solid rgba(238,238,238,1);
            .btn_wrap {
                padding: 19px 0 11px;
                // padding: 11px 0 23px;
                display: flex;
                justify-content: flex-end;
                .btn {
                    width:98px;
                    height:50px;
                    line-height: 50px;
                    text-align: center;
                    background:rgba(255,255,255,1);
                    border:1px solid #FF6900;
                    border-radius:25px;
                    font-size:24px;
                    color:rgba(255,105,0,1);
                    & + .btn {
                        margin-left: 10px;
                    }
                }
            }
            .active_icon {
                width:22px;
                height:22px;
                background:rgba(255,255,255,1);
                border: 1px solid #FF6900;
                border-radius:50%;
                position: relative;
                &::before {
                    content: '';
                    width:14px;
                    height:14px;
                    background:rgba(255,105,0,1);
                    border-radius:50%;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate3d(-50%,-50%,0);
                    // margin: -7px 0 0 -7px;
                }
            }
            .inactive_icon {
                width:22px;
                height:22px;
                background:rgba(255,255,255,1);
                border: 1px solid #FF6900;
                border-radius:50%;
            }
        }
    }
    .speech_tip {
        font-size:24px;
        color:rgba(153,153,153,1);
        margin-top: 38px;
        line-height: 1;

    }

}

</style>
